<template>
    <view style="height: 100%">
        <label :class="'form-item ' + (disabled ? 'disabled' : '')">
            <view :class="'default-border ' + (border ? 'border' : '') + ' l-class'">
                <view class="mask" v-if="disabled"></view>

                <textarea
                    :class="(autoHeight ? 'textarea-auto-height' : 'textarea') + ' l-inner-class'"
                    :type="type"
                    :value="valueClone"
                    :password="type === 'password'"
                    :placeholder="placeholder"
                    :maxlength="maxlength"
                    placeholder-class="pls-class"
                    :placeholder-style="placeholderStyle"
                    :disabled="disabled"
                    :focus="focus"
                    :auto-height="autoHeight"
                    :cursor-spacing="cursorSpacing"
                    @input="handleInputChange"
                    @focus="handleInputFocus"
                    @blur="handleInputBlur"
                    @confirm="handleInputConfirm"
                />
                <view class="indicator" v-if="indicator">{{ valueClone.length + '/' + maxlength }}</view>
            </view>
        </label>
        <l-error-tip l-error-text-class="l-error-text l-error-text-class" :errorText="errorText" v-if="errorText" />
    </view>
</template>

<script>
import lIcon from '../icon/index';
import lErrorTip from '../error-tip/index';
import rules from '../behaviors/rules';
import eventBus from '../core/utils/event-bus';
export default {
    data() {
        return {
            type: '',
            valueClone: [],
            errorText: ''
        };
    },

    mixins: ['wx://form-field', rules],
    externalClasses: ['l-class', 'l-error-text', 'l-error-text-class', 'l-inner-class'],

    props: {
        placeholder: {
            type: String,
            default: ''
        },
        value: {
            type: String,
            default: ''
        },
        focus: {
            type: Boolean,
            default: false
        },
        maxlength: {
            type: Number,
            default: 140
        },
        indicator: {
            type: Boolean,
            default: true
        },
        autoHeight: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        border: {
            type: Boolean,
            default: true
        },
        rules: {
            type: Object
        },
        placeholderStyle: {
            type: String,
            default: ''
        },
        cursorSpacing: {
            type: Number,
            default: 0
        }
    },

    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },

    methods: {
        attached() {
            this.initRules();
        },

        handleInputChange(e) {
            const { detail: t = {} } = e;
            const { value: a = '' } = t;
            this.setData({
                valueClone: a
            });
            eventBus.emit('lin-form-change-' + this.id, this.id);
            this.$emit('lininput', {
                detail: e.detail
            });
        },

        handleInputFocus(e) {
            this.$emit('linfocus', {
                detail: e.detail
            });
        },

        handleInputBlur(e) {
            this.validatorData({
                [this.name]: e.detail.value
            });
            eventBus.emit('lin-form-blur-' + this.id, this.id);
            this.$emit('linblur', {
                detail: e.detail
            });
        },

        handleInputConfirm(e) {
            this.$emit('linconfirm', {
                detail: e.detail
            });
        },

        getValues() {
            return this.valueClone;
        },

        reset() {
            this.valueClone = '';
        }
    },

    created: function () {}
};
</script>
<style>
.form-item {
    position: relative;
    font-size: 28rpx;
    color: #333;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.disabled {
    color: #9a9a9a !important;
}
.mask {
    position: absolute;
    z-index: 999;
    height: 100%;
    width: 100%;
}
.textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #333;
    height: 200rpx;
    line-height: 40rpx;
    flex: 1;
    min-height: 88rpx;
}
.textarea-auto-height {
    width: 100%;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #333;
}
.default-border {
    position: relative;
    font-size: 28rpx;
    color: #333;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 25rpx;
}
.border {
    border-radius: 4rpx;
    border: 1rpx solid #d8dee5;
}
.pls-class {
    color: #9a9a9a;
}
.indicator {
    width: 95%;
    text-align: right;
    margin-bottom: 15rpx;
    color: #9a9a9a;
}
</style>
